import {
  PageHeader,
  Checkbox,
  Form,
  Input,
  Button,
  Row,
  Col,
  InputNumber,
  Select,
  Switch,
  message
} from 'antd';
import { useNavigate,useParams } from "react-router-dom"
import CateSelect from './components/CateSelect'
import { useEffect } from 'react';
import GoodUpload from './components/GoodUpload';
import {fetchGoodSubmit,fetchGoodInfo} from '@/api/good'
import "./style.scss"

export default (props) => {
  const navigate = useNavigate();
  const [form] = Form.useForm();
  const {id} =useParams()
  const onFinish = (values) => {
      form.validateFields().then(()=>{
        let data={...values}
        if (id) values.id=id
        fetchGoodSubmit(values).then(res=>{
            if(res.info){
                message.success(`商品${id?'修改':'添加'}成功`,1,()=>navigate(-1))
            }
        })
      })
  };
  useEffect(()=>{
    if(id){
        fetchGoodInfo(id).then(({info})=>{
            if(info) form.setFieldsValue(info)
        })
    }
  },[])
  return (
      <div className='good-form'>
          <PageHeader
              className="site-page-header"
              onBack={() => navigate(-1)}
              title={id?'修改商品':'商品新增'}
              style={{ background: "#fff" }}
          />
          <div className="form">
              <Form
                  form={form}
                  name="goodAddEdit"
                  labelCol={{ span: 2 }}
                  wrapperCol={{ span: 10 }}
                  labelAlign="left"
                  validateTrigger="onBlur"
                  onFinish={onFinish}
              >
                  <Form.Item
                      name="name"
                      label="商品名称"
                      rules={[
                          { required: true, message: "商品名称是必填项" },
                          { pattern: /[\u4E00-\u9FA5]{4,6}/, message: "商品名称要求是4~6个汉字" },
                      ]}
                  >
                      <Input />
                  </Form.Item>
                  <Form.Item
                      name="desc"
                      label="商品描述"
                      rules={[
                          { required: true, message: "商品描述是必填项" },
                          { min: 10, max: 30, message: "商品描述要求10~20个字符" }
                      ]}
                  >
                      <Input.TextArea />
                  </Form.Item>
                  <Form.Item
                      name="cate"
                      label="商品品类"
                      rules={[
                          { required: true, message: "商品品类是必填项" }
                      ]}
                  >
                      <CateSelect />
                  </Form.Item>
                  <Form.Item
                      name="price"
                      label="商品价格"
                      rules={[
                          { required: true, message: "商品价格是必填项" }
                      ]}
                  >
                      <InputNumber />
                  </Form.Item>
                  {/* 
                      Form.Item可以帮我们自动收集数据，只要被Form.Item包裹的表单，相当于给它了一个value+onChange 
                  */}
                  <Form.Item
                      name="hot"
                      label="是否热销"
                      valuePropName='checked'
                      rules={[
                          // { required: true, message: "商品价格是必填项" }
                      ]}
                  >
                      <Switch />
                  </Form.Item>
                  <Form.Item
                      name="img"
                      label="商品图片"
                      rules={[
                          // { required: true, message: "商品价格是必填项" }
                      ]}
                  >
                      <GoodUpload />
                  </Form.Item>

                  <Form.Item>
                      <Button type='primary' htmlType='submit'>{id?'立刻修改':'立即添加'}</Button>
                  </Form.Item>
              </Form>
          </div>
      </div>
  )
}